<template>
  <CommonBox
    :info-display1="false"
    :info-display2="true"
    :info-color1="'gray'"
    :info-color2="'rgb(109, 133, 246)'"
    :selectDisplay="true"
    :btnDisplay1="true"
    :btnDisplay2="true"
  >
    <template v-slot:subtitle
      ><span class="type subtitle">草莓</span
      ><span class="subtitle">市场分析</span></template
    >
    <template v-slot:info-title1><span>最佳指标</span></template>
    <template v-slot:info-title2><span>价格走势</span></template>
    <template v-slot:footer>
      <div class="footer">
        <div class="market-info">
          <div class="info1">
            <div>价格平均值</div>
            <div class="average"><span class="num">15</span>￥/kg</div>
            <div class="percent">
              <i
                :class="flag1 ? icon1 : icon2"
                :style="{ color: flag1 ? color1 : color2 }"
              ></i
              ><span class="compare">10%</span> 同比去年
            </div>
          </div>
          <div class="info2">
            <div>预估价格</div>
            <div class="average"><span class="num">14</span>￥/kg</div>
            <div class="percent">
              <i
                :class="flag2 ? icon1 : icon2"
                :style="{ color: flag2 ? color1 : color2 }"
              ></i
              ><span class="compare">10%</span> 同比去年
            </div>
          </div>
        </div>
        <div class="market-echart" ref="echart"></div>
      </div>
    </template>
  </CommonBox>
</template>

<script>
import CommonBox from "./CommonBox.vue";
import * as echarts from "echarts";
export default {
  data() {
    return {
      icon1: "el-icon-caret-top",
      icon2: "el-icon-caret-bottom",
      color1: "rgb(31, 202, 182)",
      color2: "red",
    };
  },
  computed: {
    flag1() {
      return true;
    },
    flag2() {
      return false;
    },
  },
  mounted() {
    this.init();
  },
  components: {
    CommonBox,
  },
  methods: {
    init() {
      var echart1 = echarts.init(this.$refs.echart);
      echart1.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["", 2, 4, 6, 8, 10, 12],
          axisLine: { show: false }, //轴线不显示
          axisTick: { show: false },
          name: "/月",
          nameTextStyle: {
            verticalAlign: "top",
            padding: [8, 0, 0, 0],
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          interval: 6,
          min: 5,
          max: 29,
          name: "元/公斤",
          axisLabel: {
            verticalAlign: "top",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: [16, 20, 18, 15, 16, 18, 16],
            type: "line",
            smooth: true,
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
@blue: rgb(109, 133, 246);
.box-card {
  width: 100%;
  padding: 10px 42px 10px 62px;
  .type {
    //种类颜色特殊样式
    color: @blue;
  }
  .subtitle {
    font-weight: 800;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    .market-info {
      font-size: 14px;
      margin-right: 62px;
      .average {
        font-size: 20px;
        font-weight: bold;
        margin: 15px 0;
      }

      .info1 {
        margin-top: 40px;
      }
      .info2 {
        margin-top: 56px;
      }
      .percent {
        font-size: 12px;
      }
    }
    .market-echart {
      width: 1000px;
      height: 400px;
      margin-top: -50px;
      margin-right: -70px;
    }
  }
}
</style>